<template>
  <div>
    <center><h1>用户注册</h1></center>
    <a-form-item label="用户名" v-bind="formlayout">
      <a-input v-model="username" placeholder="请输入用户名"></a-input>
    </a-form-item>

    <a-form-item label="密码" v-bind="formlayout">
      <a-input v-model="password" placeholder="请输入密码"></a-input>
    </a-form-item>

    <a-form-item label="确认密码" v-bind="formlayout">
      <a-input
        v-model="password2"
        placeholder="再次确认密码"
        @blur="check_password"
      ></a-input>
      <div v-show="true">
        <span style="color: red">{{ password_message }}</span>
      </div>
    </a-form-item>

    <a-form-item label="确认密码" v-bind="formlayout">
      <a-upload
        name="file"
        :multiple="true"
        action="http://127.0.0.1:8000/myapp/uploadfile/"
        :headers="headers"
        @change="handleChange"
        :remove="handleFileRemove"
      >
        <a-button> <a-icon type="upload" /> Click to Upload </a-button>
        <a-avatar
          :src="img_url + img_name"
          style="margin-left: 30px"
          v-show="img_name"
        />
      </a-upload>
    </a-form-item>

    <a-form-item label="手机号" v-bind="formlayout">
      <a-input v-model="phone" placeholder="请输入手机号"></a-input>
    </a-form-item>

    <a-form-item label="邮箱" v-bind="formlayout">
      <a-input v-model="email" placeholder="请输入邮箱"></a-input>
      <a-button type="primary" @click="sendemail">发送验证码</a-button>
    </a-form-item>

    <a-form-item label="邮箱验证码" v-bind="formlayout">
      <a-input v-model="email_code" placeholder="邮箱验证码"></a-input>
    </a-form-item>

    <a-form-item v-bind="buttonlayout">
      <a-button type="primary" @click="submit">注册</a-button>
    </a-form-item>
  </div>
</template>


<script>
import { user_register, get_email, delete_img } from "./axios_http/api";
export default {
  data() {
    return {
      username: "",
      password: "",
      password2: "",
      email: "",
      phone: "",
      email_code: "",
      img_url: this.img_url.baseurl,
      img_name: "",
      headers: {
        authorization: "authorization-text",
      },

      // 关键词
      password_message: "",
      password_error: false,

      // 表单样式
      formlayout: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
      },

      // 按钮样式
      buttonlayout: {
        // 按钮
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 16, offset: 8 },
        },
      },
    };
  },
  methods: {
    handleFileRemove(file) {
      const name = file.name;
      console.log(name);
      this.img = "";
      delete_img({ data: { img_name: name } }).then((resp) => {
        console.log(resp);
      });
      // this.axios.delete('http://localhost:8000/myapp/upload/?name=' + name).then((res) => {
      //     console.log(this.img)
      // })
    },
    // 注册
    submit() {
      if (this.password_error) {
        return false;
      }
      let data = {
        username: this.username,
        password: this.password,
        password2: this.password2,
        phone: this.phone,
        email: this.email,
        email_code: this.email_code,
        photo: this.img_name,
      };

      // 请求后端接口
      user_register(data).then((resp) => {
        console.log(resp);
        // alert("注册成功")
        this.$message.info(resp.msg);
        if (resp.code == 200) {
          this.username = "";
          this.password = "";
          this.password2 = "";
          this.email = "";
          this.phone = "";
          this.email_code = "";
        }
      });
    },

    handleChange(info) {
      if (info.file.status !== "uploading") {
        console.log(">>>", info.file, info.fileList);
        this.img_name = info.file.name;
      }
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },

    // 校验密码
    check_password() {
      if (this.password != this.password2) {
        this.password_message = "两次密码不一致";
        this.password_error = true;
        return false;
      }
      if (this.password2 == "") {
        this.password_message = "密码不能为空";
        this.password_error = true;
        return false;
      }
      this.password_message = "";
      this.password_error = false;
      return true;
    },
    // 获取邮箱验证码接口
    sendemail() {
      get_email({ email: this.email }).then((resp) => {
        console.log(resp);
        this.$message.info(resp.msg);
      });
    },
  },
};
</script>


<style>
</style>